<template>
  <div class="test-form">
    <parser :form-conf="formConf" @submit="sumbitForm1" />
  <!--  <parser :key="key2" :form-conf="formConf" @submit="sumbitForm2" /> -->
   <!-- <el-button @click="change">
      change
    </el-button> -->
  </div>
</template>

<script>
import Parser from '../Parser'

// 若parser是通过安装npm方式集成到项目中的，使用此行引入
// import Parser from 'form-gen-parser'

export default {
  components: {
    Parser
  },
  props: {},
  data() {
    return {
      key2: +new Date(),
      formConf: {
        "fields": [{
          "__config__": {
            "label": "单行文本",
            "labelWidth": null,
            "showLabel": true,
            "changeTag": true,
            "tag": "el-input",
            "tagIcon": "input",
            "required": true,
            "layout": "colFormItem",
            "span": 24,
            "document": "https://element.eleme.cn/#/zh-CN/component/input",
            "regList": [{
              "pattern": "/^1(3|4|5|7|8|9)\\d{9}$/",
              "message": "手机号格式错误"
            }]
          },
          "__slot__": {
            "prepend": "",
            "append": ""
          },
          "__vModel__": "mobile",
          "placeholder": "请输入手机号",
          "style": {
            "width": "100%"
          },
          "clearable": true,
          "prefix-icon": "el-icon-mobile",
          "suffix-icon": "",
          "maxlength": 11,
          "show-word-limit": true,
          "readonly": false,
          "disabled": false
        }, {
          "__config__": {
            "label": "计数器",
            "showLabel": true,
            "changeTag": true,
            "labelWidth": null,
            "tag": "el-input-number",
            "tagIcon": "number",
            "span": 24,
            "layout": "colFormItem",
            "required": true,
            "regList": [],
            "document": "https://element.eleme.cn/#/zh-CN/component/input-number",
            "formId": 101,
            "renderKey": "1011624691425393"
          },
          "placeholder": "计数器",
          "step": 1,
          "step-strictly": false,
          "controls-position": "",
          "disabled": false,
          "__vModel__": "field101"
        }, {
          "__config__": {
            "label": "按钮",
            "showLabel": true,
            "changeTag": true,
            "labelWidth": null,
            "tag": "el-button",
            "tagIcon": "button",
            "span": 24,
            "layout": "colFormItem",
            "document": "https://element.eleme.cn/#/zh-CN/component/button",
            "formId": 103,
            "renderKey": "1031624691889021"
          },
          "__slot__": {
            "default": "主要按钮"
          },
          "type": "primary",
          "icon": "el-icon-search",
          "round": false,
          "size": "medium",
          "plain": false,
          "circle": false,
          "disabled": false,
          "__vModel__": "field103"
        }, {
          "__config__": {
            "label": "评分",
            "tag": "el-rate",
            "tagIcon": "rate",
            "defaultValue": 0,
            "span": 24,
            "showLabel": true,
            "labelWidth": null,
            "layout": "colFormItem",
            "required": true,
            "regList": [],
            "changeTag": true,
            "document": "https://element.eleme.cn/#/zh-CN/component/rate",
            "formId": 102,
            "renderKey": "1021624691429299"
          },
          "style": {},
          "max": 5,
          "allow-half": false,
          "show-text": false,
          "show-score": false,
          "disabled": false,
          "__vModel__": "field102"
        }],
        "formRef": "elForm",
        "formModel": "formData",
        "size": "medium",
        "labelPosition": "right",
        "labelWidth": 100,
        "formRules": "rules",
        "gutter": 15,
        "disabled": false,
        "span": 24,
        "formBtns": true
      }

    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    // 表单数据回填，模拟异步请求场景
    setTimeout(() => {
      // 请求回来的表单数据
      const data = {
        mobile: '18836662555'
      }
      // 回填数据
      this.fillFormData(this.formConf, data)
      // 更新表单
      this.key2 = +new Date()
    }, 2000)
  },
  methods: {
    fillFormData(form, data) {
      form.fields.forEach(item => {
        const val = data[item.__vModel__]
        if (val) {
          item.__config__.defaultValue = val
        }
      })
    },
    change() {
      this.key2 = +new Date()
      const t = this.formConf
      this.formConf = this.formConf2
      this.formConf2 = t
    },
    sumbitForm1(data) {
      console.log('sumbitForm1提交数据：', data)
    },
    sumbitForm2(data) {
      console.log('sumbitForm2提交数据：', data)
    }
  }
}
</script>

<style lang="scss" scoped>
.test-form {
  margin: 15px auto;
  width: 800px;
  padding: 15px;
}
</style>
